<template>
    <div>
        <transition :name="transitionName"><router-view class="Router"></router-view></transition>
        <cube-tab-bar class="botnav" v-model="selectedLabelDefault" :data="tabs" @click="clickHandler" @change="changeHandler"> </cube-tab-bar>
        <span class="countSum">{{countSum}}</span>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
    name:'Botnav',
    data() {
        return {
            transitionName:'slide-right',//过渡的名字
            selectedLabelDefault: '首页',
            tabs: [{
                label: '首页',
                icon: 'cubeic-home'
            }, {
                label: '分类',
                icon: 'cubeic-red-packet'
            }, {
                label: '搜索',
                icon: 'cubeic-search'
            }, {
                label: '购物车',
                icon: 'cubeic-mall'
            },{
                label: '我的',
                icon: 'cubeic-person'
            }]
        }
    },
    computed: {
        ...mapGetters({
            countSum:'countSum'
        })
    },
    // watch: {//刷新页面路由不会刷新，所以没用，从登陆页面进来，也不会触发这里，之后点击botbar切换的时候才会触发
    //     '$route':function(val){
    //         // console.log(val)
    //         // console.log(this.$route.path)
    //         switch (this.$route.path) {
    //             case '/botnav/index':
    //                 this.selectedLabelDefault='首页'
    //                 break;
    //             case '/botnav/list':
    //                 this.selectedLabelDefault='分类'
    //                 break;
    //             case '/botnav/search':
    //                 this.selectedLabelDefault='搜索'
    //                 break;
    //             case '/botnav/cart':
    //                 this.selectedLabelDefault='购物车'
    //                 break;
    //             case '/botnav/mine':
    //                 this.selectedLabelDefault='我的'
    //                 break;
    //         }
    //     }
    // },
    created() {
        switch (this.$route.path) {
            case '/botnav/index':
                this.selectedLabelDefault='首页'
                break;
            case '/botnav/list':
                this.selectedLabelDefault='分类'
                break;
            case '/botnav/search':
                this.selectedLabelDefault='搜索'
                break;
            case '/botnav/cart':
                this.selectedLabelDefault='购物车'
                break;
            case '/botnav/mine':
                this.selectedLabelDefault='我的'
                break;
        }
    },
    methods: {
        clickHandler(ii){
            // console.log(ii)//输出label重复点击也会输出
        },
        changeHandler(label){
            // console.log(label)//输出label重复点击也不会输出
            switch(label){
                case '首页':
                    this.$router.replace('/botnav/index')
                break;
                case '分类':
                    this.$router.replace('/botnav/list')
                break;
                case '搜索':
                    this.$router.replace('/botnav/search')
                break;
                case '购物车':
                    this.$router.replace('/botnav/cart')
                break;
                case '我的':
                    this.$router.replace('/botnav/mine')
                break;
            }
        }
    },
}
</script>
<style lang="stylus">
.botnav{
    position fixed
    bottom 0
    left 0
    right 0
    width 100%
    z-index 1000
    background-color #fff
    .cube-tab div{
        font-size 16px
        padding-top 5px
    }
    i{
        font-size 20px
    }
}
.Router{
    position absolute
    width 100%
    transition all 0.8s ease
}
.slide-right-leave-active{
    opacity 0
    --webkit-transform translate(100%,0)
    transform translate(100%,0)
}
.slide-right-enter{
    opacity 0
    --webkit-transform translate(-100%,0)
    transform translate(-100%,0)
}
.countSum{
    text-align center
    position  fixed
    bottom 33px
    right 23%
    z-index  1001
    width 18px
    height 18px
    line-height 18px
    border-radius 50%
    font-size 14px
    background red
    color #fff
}
</style>